<template>
  <div class="physics-facility">
    <el-collapse-item>
      <template slot="title">
        <img
          src="../images/11.png"
          class="img-size"
        >{{ name }}
      </template>
      <div style="width:calc(100% - 20px); padding:0 0 0 10px;">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="onNodeClick"
        >
          <span
            slot-scope="{ node }"
            class="span-ellipsis"
          >
            <span :title="node.label">{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
    </el-collapse-item>
  </div>
</template>

<script>

export default {
  name: 'PhysicsFacility',
  components: {
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    total: {
      type: Number,
      default: 0,
    },
    index: {
      type: Number,
      default: 0,
    },
    treeData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      defaultProps: {
        children: 'point',
        label: 'name',
      },
      name: '',
    };
  },
  watch: {
    title() {
      this.name = `${this.title}(${this.total})`;
    },
  },
  mounted() {
    this.name = `${this.title}(${this.total})`;
  },
  methods: {
    onNodeClick(data, node) {
      if (node.isLeaf) {
        // console.log('子节点', data, node);
        this.$emit('select-item', data.id);
      } else if (node.expanded && !node.isLeaf) {
        // console.log('父节点展开', data, node);
        this.$emit('select-item', data.id);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
  .physics-facility {
    height: 100%;
    .img-size{
      height: 24px;
    }
    .container {
      height: 100%;
      .main {
        padding: 0;
      }
    }
    /deep/ .el-collapse-item__header{
      background: #F5F5F5;
    }
    /deep/ .el-icon-caret-right{
      font-family: FontAwesome !important;
    }
    // /deep/ .el-tree-node__expand-icon.expanded .el-icon-caret-right::before {
    //   content: "\f067";
    // }
    // /deep/.el-tree-node .is-expanded .el-tree-node__content .el-icon-caret-right::before {
    //   content: "\f061";
    // }
  }
/deep/ .el-tree-node__expand-icon.expanded
{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
// 有子节点 且未展开
/deep/ .el-icon-caret-right::before
{
    // background: url("./images/plus.png") no-repeat 0 3px;
    content: "\f067";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
}
//有子节点 且已展开
/deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right::before
{
    // background: url("./images/minus.png") no-repeat 0 3px;
    content: "\f068";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
}
</style>
